<template>
    <div class="app-container" v-loading.fullscreen.lock="loading">
        <div>
            <el-form class="lookForm" label-width="120px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="学号">
                            <el-input size="mini" v-model="search.stuNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label-width="10px">
                            <el-button icon="el-icon-search" type="primary" size="mini" @click="doSearch">搜索</el-button>
                            <el-button icon="el-icon-refresh" size="mini" @click="doRefresh">重置</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="班级">
                            <el-select style="width: 100%;" size="mini" @change="changeSelect"
                                v-model="search.className">
                                <el-option v-for="(v, i) in class_list" :key="i" :label="v.className"
                                    :value="v.className"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="学年">
                            <el-select style="width: 100%;" size="mini" @change="changeYearSelect"
                                v-model="search.stuYearName">
                                <el-option v-for="(v, i) in select_year_list" :key="i" :label="v.stuYearName"
                                    :value="v.stuYearName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <el-table v-loading="loading" :data="data_list" style="width:100%;margin-top: -20px;">
            <el-table-column v-if="search.className != '' || search.stuYearName != ''" label="#" align="center"
                width="80">
                <template slot-scope="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="stuYearName" label="学年" align="center" />
            <el-table-column prop="className" label="班级" align="center" />
            <el-table-column prop="stuName" label="学生姓名" align="center" />
            <el-table-column prop="stuNo" label="学号" align="center" />
            <el-table-column prop="score" label="体能素质成绩" align="center" />
            <el-table-column label="学生状态" align="center" prop="status">
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.srs_stu_status" :value="scope.row.status" />
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="listInfo" />

    </div>
</template>
<script>
import { listSport, listAllSport } from "@/api/stuCQS/basedata/teacher";
import { isEmpty } from "@/api/helpFunc";
import { listOwnClass } from "@/api/stuCQS/info-fill/stu_eva_task";
import { listAllYear as listStuYear } from "@/api/stuCQS/basedata/year";

export default {
    name: "csc",
    dicts: ['srs_stu_status'],
    data() {
        return {
            select_year_list: [],

            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            loading: false,
            total: 0,
            data_list: [],
            all_list: [],
            search: {
                stuNo: "",
                className: "",
                stuYearName: ""
            },
            class_list: [],
        }
    },
    created() {
        this.listStuYear();

        this.listOwnClass();
        this.listAllInfo();
        this.listInfo();
    },
    methods: {
        async listStuYear() {
            let res = await listStuYear();
            if (res.code == 200) {
                this.select_year_list = [...res.data];
            }
        },
        async listAllInfo() {
            this.loading = true;
            let res = await listAllSport();
            this.loading = false;
            if (res.code == 200) {
                this.all_list = [...res.data];
            }
        },
        async listInfo() {
            this.loading = true;
            let res = await listSport(this.queryParams);
            this.loading = false;
            if (res.code == 200) {
                this.data_list = [...res.rows];
                this.total = res.total;
            }
        },
        changeSelect() {
            let className = this.search.className;
            let stuYearName = this.search.stuYearName;

            if (!isEmpty(className)) {
                let temp1 = [];
                let temp2 = [...this.all_list];
                temp2.map(x => {
                    if (!isEmpty(stuYearName)) {
                        if (x.className == className && x.stuYearName == stuYearName) {
                            temp1.push(x);
                        }
                    } else {
                        if (x.className == className) {
                            temp1.push(x);
                        }
                    }
                });
                this.total = 0;
                this.queryParams.pageSize = temp1.length;
                this.data_list = [...temp1];
                return;
            }
        },
        changeYearSelect() {
            let className = this.search.className;
            let stuYearName = this.search.stuYearName;
            if (!isEmpty(stuYearName)) {
                let temp1 = [];
                let temp2 = [...this.all_list];
                temp2.map(x => {
                    if (!isEmpty(className)) {
                        if (x.stuYearName == stuYearName && x.className == className) {
                            temp1.push(x);
                        }
                    } else {
                        if (x.stuYearName == stuYearName) {
                            temp1.push(x);
                        }
                    }

                });
                this.total = 0;
                this.queryParams.pageSize = temp1.length;
                this.data_list = [...temp1];
                return;
            }
        },
        doRefresh() {
            this.search.stuNo = "";
            this.search.className = "";
            this.search.stuYearName = "";

            this.queryParams.pageSize = 10;
            this.listInfo();
        },
        async doSearch() {
            let stuNo = this.search.stuNo;
            if (!isEmpty(stuNo)) {
                let temp1 = [];
                let temp2 = [...this.all_list];
                temp2.map(x => {
                    if (x.stuNo == stuNo) {
                        temp1.push(x);
                    }
                });
                this.total = 0;
                this.queryParams.pageSize = temp1.length;
                this.data_list = [...temp1];
                return;

            }
        },
        async listOwnClass() {
            this.loading = true;
            let res = await listOwnClass();
            this.loading = false;
            if (res.code == 200) {
                this.class_list = [...res.data];
            }
        }
    }
}
</script>
<style scoped lang="scss">
.lookForm {
    .el-form-item {
        margin-bottom: 5px;
    }
}
</style>